<template>
    <el-aside width="200px">
                    <!-- 左侧导航 -->
                    <el-menu
                        :default-active="$route.path"
                        class="el-menu-vertical-demo"
                        background-color="#2F4056"
                        text-color="rgb(255, 255, 255)"
                        active-text-color="#2C7BE5"
                        :unique-opened="true"
                        :router="true"
                    >
                    <!-- 菜单 -->
                        <el-submenu v-for="item in menu.children"  :key="item.id" :index="item.path">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span>{{item.name}}</span>
                            </template>
                                <el-menu-item :index="item.path+'/'+item2.path" v-for="item2 in item.children" :key="item2.id">
                                    <!-- 二级路由 -->
                                    {{item2.name}}
                                    <router-link :to="item.path+'/'+item2.path"></router-link>
                                </el-menu-item>
                        </el-submenu>                
                    </el-menu>
    </el-aside>
</template>

<script>
export default {
    data() {
        return {
            menu:[]
        }
    },
    computed:{
    },
    mounted(){
        this.getMenus()
    },
    methods:{
        async getMenus(){
            const res=await this.$http.users.getMenu();
            if(res.code==200){
                this.menu=res.data.children[0];
                // 反转数组
                this.menu.children.reverse();
            }
        }
    }
}
</script>

<style scoped lang="scss">
.el-aside {
    background-color: #2F4056;
    color: rgb(255, 255, 255);
    /* box-shadow: 0px 0px 5px rgb(228, 228, 228); */
    .el-menu{
      border:none !important;
      li{
          background-color: #1F2D3D !important;
      }
    }
}
</style>